<template>
  <!-- 文件平铺 -->
  <div class="file-grid-wrapper">
    <ul class="file-list" v-loading="loading" element-loading-text="文件加载中……" @click.self="rightMenu.isShow = false"
        @scroll="rightMenu.isShow = false">
      <li
          class="file-item"
          v-for="(item, index) in fileListSorted"
          :key="index"
          :title="item | filenameComplete"
          @click="clickFileName(item, index, fileListSorted)"
          @contextmenu.prevent="rightClickFile(item, index, $event)"
      >
        <img class="file-img" :src="setFileImg(item)"/>
        <div class="file-name">{{ item | filenameComplete }}</div>
        <div
            class="file-checked-wrapper"
            :class="{ checked: item.checked }"
            v-show="batchOperate"
            @click.stop.self="item.checked = !item.checked"
        >
          <el-checkbox
              class="file-checked"
              v-model="item.checked"
              @click.stop="item.checked = !item.checked"
          ></el-checkbox>
        </div>
      </li>
    </ul>
    <transition name="el-fade-in-linear">
      <div class="right-menu" v-show="rightMenu.isShow" :style="`top: ${rightMenu.top}px; left: ${rightMenu.left}px;`">
        <el-button type="info" size="small" plain @click.native="deleteFileBtn(selectedFile)">删除</el-button>
        <el-button type="info" size="small" plain @click.native="recoverFileBtn(selectedFile)" v-show="fileType().isRecycle()">恢复</el-button>
        <el-button type="info" size="small" plain @click.native="showMoveFileDialog(selectedFile)"
                   v-show="fileType().isNotRecycle()"
        >移动
        </el-button>
        <el-button type="info" size="small" plain @click.native="renameFile(selectedFile)"
                   v-show="fileType().isNotRecycle()"
        >重命名
        </el-button
        >
        <el-button
            type="info"
            size="small"
            plain
            v-show="selectedFile.dir == false && fileType().isNotRecycle()"
            @click.native="rightMenu.isShow = false"
        >
          <a
              target="_blank"
              style="display: block;color: inherit;"
              :href="getDownloadPath(selectedFile.id)"
              :download="selectedFile.filename + '.' + selectedFile.extension"
          >下载</a
          >
        </el-button>
        <!--        <el-button-->
        <!--            type="info"-->
        <!--            size="small"-->
        <!--            plain-->
        <!--            @click.native="unzipFile(selectedFile)"-->
        <!--            v-if="fileType.isNotRecycle() && (selectedFile.extension == 'zip' || selectedFile.extension == 'rar')"-->
        <!--        >解压缩-->
        <!--        </el-button-->
        <!--        >-->
      </div>
    </transition>
  </div>
</template>

<script>
import {unzipfile, deleteFile, renameFile, deleteRecoveryFile, recoverRecycleFile} from '/@/request/file.js'
//import {mapGetters} from 'vuex'
import { watch, computed, onMounted, toRefs, reactive, getCurrentInstance } from 'vue';
import { useStore } from '/@/store/index';
import { useRouter } from 'vue-router';
import 'element-plus/theme-chalk/base.css'
import {filenameComplete, filenameSplit} from "/@/utils/wangpanFiters.js";
import { ElMessage, ElMessageBox } from 'element-plus';
import { wangpanGlobal }  from '/@/utils/wangpanGlobalConst';
import {fileType,getThumbnailPath,getDownloadPath,getFileOnlineViewPathByOffice} from '/@/utils/wangpanGlobalFunction';
import { Session } from '/@/utils/storage';

export default {
	name: 'FileGrid',
	emits: ['setSelectionFile','setOperationFile','setMoveFileDialogData','getTableDataByType'],
  	props: {
    fileList: Array, //  文件列表
    loading: Boolean,
    batchOperate: Boolean
  },
  setup (props, { emit }) {
  	const store=useStore();
  	const router=useRouter();
 	
 	const state = reactive({
      fileListSorted: props.fileList,
      //  移动文件模态框数据
      dialogMoveFile: {
        isBatchMove: false,
        visible: false, //  是否可见
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      },
      downloadFilePath: '',
      viewFilePath: '',
      // 右键菜单
      rightMenu: {
        isShow: false,
        top: 0,
        left: 0
      },
      selectedFile: {}
    });

    const selectedColumnList = computed(()=>{
    	return store.state.wangpanFileList.selectedColumnList === null
            ? ["extension", "fileSize", "updateTime", "deleteTime"]
            : store.state.wangpanFileList.selectedColumnList.split(",");
    }); 
    const operaColumnExpand = computed(()=>{
    	 return  store.state.wangpanFileList.operaColumnExpand !== null
                ? Number(store.state.wangpanFileList.operaColumnExpand)
                : document.body.clientWidth > 1280 ? wangpanGlobal.gFOLD_TYPE.UNFOLD : wangpanGlobal.gFOLD_TYPE.FOLD;
    
    }); 
    const currentFileModel= computed(()=>{
	      return store.state.wangpanFileList.fileModel
	});

	//  判断当前路径下是否有普通文件
    const isIncludeNormalFile = computed(()=>{
      return props.fileList.map((data) => data.dir).includes(0)
    });
    //  判断当前路径下是否有压缩文件
    const isIncludeZipRarFile = computed(()=>{
      return (
          props.fileList.map((data) => data.extension).includes('zip') ||
          props.fileList.map((data) => data.extension).includes('rar')
      )
    });
    // 批量操作模式 - 被选中的文件
    const selectedFileList = computed(()=>{
      return state.fileListSorted.filter((item) => item.checked)
    });

	watch (()=>props.fileList,(newValue)=>{
		console.log('watch ...props.fileList')
		state.fileListSorted = [...newValue]
          .sort((pre, next) => {
            return next.dir - pre.dir
          })
          .map((item) => {
            return {
              ...item,
              checked: false
            }
          })
	});
	watch (()=>state.fileListSorted.filter((item) => item.checked),(newValue)=>{
		console.log('watch ...state.fileListSorted')
		if (newValue.length) {
        emit('setSelectionFile', newValue)
      }
	});

	// 文件右键事件
    const rightClickFile = (item, index, mouseEvent)=> {
      if (!state.batchOperate) {
        state.rightMenu.isShow = false
        setTimeout(() => {
          state.selectedFile = item
          state.rightMenu.top = mouseEvent.clientY - 64
          state.rightMenu.left = mouseEvent.clientX + 18
          state.rightMenu.isShow = true
        }, 100)
      }
    };
    
    /**
     * 表格数据获取相关事件
     */
    /**
     * 表格数据获取相关事件
     */
     
    //  根据文件扩展名设置文件图片
    const setFileImg = (row)=>{
      if (!row.extension) {
        //  文件夹
        return wangpanGlobal.gFILE_IMG_MAP.get('dir')
      } else if (!wangpanGlobal.gFILE_IMG_TYPE_LIST.includes(row.extension)) {
        //  无法识别文件类型的文件
        return wangpanGlobal.gFILE_IMG_MAP.get('unknown')
      } else if (['jpg', 'png', 'jpeg', 'gif'].includes(row.extension)) {
        // 图片类型，直接显示缩略图
        return getThumbnailPath(row.id)
      } else {
        //  可以识别文件类型的文件
        return wangpanGlobal.gFILE_IMG_MAP.get(row.extension)
      }
    };
    
    //  计算文件大小
    const calculateFileSize = (size)=>{
      const B = 1024
      const KB = Math.pow(1024, 2)
      const MB = Math.pow(1024, 3)
      const GB = Math.pow(1024, 4)
      if (!size) {
        return '_'
      } else if (size < KB) {
        return (size / B).toFixed(0) + 'KB'
      } else if (size < MB) {
        return (size / KB).toFixed(1) + 'MB'
      } else if (size < GB) {
        return (size / MB).toFixed(2) + 'GB'
      } else {
        return (size / GB).toFixed(3) + 'TB'
      }
    };

    //  点击文件名
    const clickFileName = (row)=> {
      //  若是目录则进入目录
      if (row.dir) { 
      console.log('FILEGRID.......click dir.........,so ......');      
      let val={
            pid: row.id,
            fileType: fileType().current()
          };
      	Session.set('WANGPAN_Qurey',val);
        router.push({
          query: val,
        });
        
      }
      //  若是文件，则进行相应的预览
      else {
        //  若当前点击项是图片
        if (wangpanGlobal.gIMG_TYPE_LIST.includes(row.extension)) {
          let data = {
            imgReviewVisible: true,
            imgReviewList: [
              {
                id: row.id,
                fileUrl: getDownloadPath(row.id),
                downloadLink: getDownloadPath(row.id),
                filename: row.filename,
                extension: row.extension
              }
            ],
            activeIndex: 0
          }
          store.commit('wangpanImgReview/setImgReviewData', data)
        }
        //  若当前点击项是可以使用office在线预览的
        if (['ppt', 'pptx', 'doc', 'docx', 'xls', 'xlsx'].includes(row.extension)) {
          // window.open(getFileOnlineViewPathByOffice(row.id), '_blank')
          window.open(getDownloadPath(row.id), '_blank')
        }
        //  若当前点击项是pdf
        if (row.extension === 'pdf') {
          window.open(getDownloadPath(row.id), '_blank')
        }
        //  若当前点击项是html、js、css、json
        const CODE = ['html', 'js', 'css', 'json']
        if (CODE.includes(row.extension)) {
          window.open(getDownloadPath(row.id), '_blank')
        }
        //  若当前点击项是视频mp4格式
        if (wangpanGlobal.gVIDEO_TYPE_LIST.includes(row.extension)) {
          let data = {
            visible: true,
            url: getDownloadPath(row.id),
            filename: row.filename + '.' + row.extension
          }
          store.commit('wangpanVideoReview/setVideoReviewData', data)
        }
        //  若当前点击项是视频mp3格式
        if (wangpanGlobal.gMUSIC_TYPE_LIST.includes(row.extension)) {
          let data = {
            visible: true,
            url: getDownloadPath(row.id),
            filename: row.filename + '.' + row.extension
          }
         store.commit('wangpanVideoReview/setVideoReviewData', data)
        }
      }
    };

    /**
     * 移动按钮相关事件
     */
    //  操作列-移动按钮：打开移动文件模态框
    
    const showMoveFileDialog = (file)=> {
      state.rightMenu.isShow = false
      //  第一个参数: 是否批量移动；第二个参数：打开/关闭移动文件模态框
      emit('setOperationFile', file)
      emit('setMoveFileDialogData', false, true)
    };

    //  操作列-解压缩按钮
    const unzipFile = (fileInfo)=> {
      const loading = proxy.$loading({
        lock: true,
        text: '正在解压缩，请稍等片刻...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      unzipfile(fileInfo).then(() => {
        emit('getTableDataByType')
        store.dispatch('wangpanSideMenu/showStorage')
        ElMessage.success('解压成功')
        loading.close()
      }).catch(err => {
        console.log(err)
        ElMessage.error("系统忙，解压失败")
      })
    };

    /**
     * 恢复按钮事件
     */
    
    const recoverFileBtn = (fileInfo)=> {
      let data = {
        userFileId: fileInfo.id
      }
      if (fileType().isRecycle()) { //  回收站里 - 彻底删除
        ElMessageBox.confirm('是否恢复该文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          recoverRecycleFile(data).then(() => {
                ElMessage({
                  type: 'success',
                  message: filenameComplete(fileInfo) + '已恢复'
                })
                emit('getTableDataByType')
                store.dispatch('wangpanSideMenu/showStorage')
                store.dispatch('wangpanFileList/fetchPathTreeMap')
              }
          )
        }).catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消恢复'
          })
        })
      }
    };

    //  操作列-删除按钮
    const deleteFileBtn = (fileInfo)=> {
      if (fileType().isRecycle()) { //  回收站里 - 彻底删除
        ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          confirmDeleteFile(fileInfo, true)
        }).catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {  //  非回收站
        ElMessageBox.confirm('删除后可在回收站查看, 是否继续删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          confirmDeleteFile(fileInfo, false)
        }).catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    };
    //  删除文件模态框-确定按钮
    const confirmDeleteFile = (fileInfo, type)=> {
      let data = {userFileId: fileInfo.id}
      if (type) {  //  回收站中删除
        deleteRecoveryFile(data).then(() => {
          emit('getTableDataByType')
          store.dispatch('wangpanSideMenu/showStorage')
          ElMessage.success('删除成功')
          store.dispatch('wangpanFileList/fetchPathTreeMap')
        }).catch(err => {
          console.log(err)
          ElMessage.error("系统忙，删除失败")
        })
      } else {  //  非回收站删除
        deleteFile(data).then(() => {
          emit('getTableDataByType')
          store.dispatch('wangpanSideMenu/showStorage')
          ElMessage.success('删除成功')
        }).catch(err => {
          console.log(err)
          ElMessage.error("系统忙，删除失败")
        })
      }
    };
    // 文件重命名
    const renameFile = (fileInfo)=> {
      let filename = filenameComplete(fileInfo)
      ElMessageBox.prompt('请输入文件名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: filename
      }).then(({value}) => {
        let name = filenameSplit(value)
        if (!name.filename) {
          throw new Error("错误文件名")
        }
        if (fileInfo.filename === name.filename && fileInfo.extension === name.extension) {
          throw new Error("文件名未发生改变")
        }
        fileInfo.oldFilename = fileInfo.filename
        fileInfo.oldExtension = fileInfo.extension
        fileInfo.filename = name.filename
        fileInfo.extension = name.extension
        confirmRenameFile(fileInfo)
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '取消输入'
        })
      })
    };
    // 文件重命名模态框 确定按钮
    const confirmRenameFile = (fileInfo)=> {
      console.log(fileInfo)
      let data = {
        userFileId: fileInfo.id,
        filename: fileInfo.filename
      }
      if (!fileInfo.dir) {
        data.extension = fileInfo.extension
      }
      renameFile(data).then(() => {
        emit('getTableDataByType')
        store.dispatch('wangpanSideMenu/showStorage')
        ElMessage.success('重命名成功')
      }).catch((err) => {
        fileInfo.filename = fileInfo.oldFilename
        fileInfo.extension = fileInfo.oldExtension
        console.error(err)
        ElMessage.error("系统忙，重命名失败")
      })
    };
    return {
    	
		...toRefs(state),
    };
	
  },
}
</script>

<style lang="stylus" scoped>
@import '../../styles/varibles.styl'
@import '../../styles/mixins.styl'

.file-grid-wrapper
  .file-list
    height calc(100vh - 206px)
    overflow-y auto
    display flex
    flex-wrap wrap
    align-items flex-start
    align-content flex-start
    setScrollbar(10px)

    .file-item
      margin 0 16px 16px 0
      position relative
      width 120px
      padding 8px
      text-align center
      cursor pointer

      &:hover
        background $tabBackColor

        .file-name
          font-weight 550

      .file-img
        width 80px
        height 80px

      .file-name
        margin-top 8px
        height 44px
        line-height 22px
        font-size 12px
        word-break break-all
        setEllipsis(2)

      .file-checked-wrapper
        position absolute
        top 0
        left 0
        z-index 2
        background rgba(245, 247, 250, 0.5)
        width 100%
        height 100%

        .file-checked
          position absolute
          top 16px
          left 24px

      .file-checked-wrapper.checked
        background rgba(245, 247, 250, 0)

  .right-menu
    position fixed
    display flex
    flex-direction column

    :deep(.el-button)
      margin 0
      border-radius 0
</style>
